<template name="rankList">
	<view class="screenBarCnt">
		<view class="screenBarBox">
			<block v-for="(item,index) in screenData">
				<view :key="index" class="screenItem" data-type="area" data-index="0" @tap="setPopType">
					<text>{{item.name}}</text>
					<text class="iconfont" :class="item.icon"></text>
				</view>
			</block>
		</view>
		<view class="areaBox">
			<scroll-view class="leftArea" :style="{'height':hgt+'px'}" scroll-y="true">
				<text v-for="(item,index) in screenData[0].data" :key="index">{{item.label}}</text>		
			</scroll-view>
			<scroll-view class="rightStreet" :style="{'height':hgt+'px'}" scroll-y="true">
		
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import area from "@/components/citySelect/city-data/area.js";
	import city from "@/components/citySelect/city-data/city.js";
	export default {
		name: 'rankList', //组件名称
		computed: {
			...mapState({
				locationCity: state => state.map.locationCity,
				selectCity: state => state.map.selectCity
			})
		},
		// 传递参数
		props: {
			prop1: {
				type: String,
				default: ''
			}
		},
		// 组件参数
		data() {
			return {
				hgt:uni.upx2px(500),
				screenData: [
					{
						name: '商圈',
						icon: 'icon-unfold',
						value: null,
						data: [{
							label: '附近',
							data: [{
								label: '1000m',
								value: 1000
							}, {
								label: '3000m',
								value: 3000
							}, {
								label: '5000m',
								value: 5000
							}]
						}]
					}, {
						name: '分类',
						icon: 'icon-unfold',
						data: []
					}, {
						// 排序
						name: '排序',
						postNama: 'orderBy',
						postValue: null,
						icon: 'icon-unfold',
						data: [{
							rankName: '智能排序',
							rankValue: null
						}, {
							rankName: '销量最多',
							rankValue: 1
						}, {
							rankName: '评分最高',
							rankValue: 2
						}, {
							rankName: '价格最高',
							rankValue: 3
						}, {
							rankName: '价格最低',
							rankValue: 4
						}, {
							rankName: '离我最近',
							rankValue: 5
						}]
					}, {
						name: '筛选',
						icon: 'icon-shaixuan',
						data: []
					},
				]
			}
		},
		// 组件方法
		methods: {
			// 获取当前城市的行政区
			getArea() {
				let cityName = this.selectCity.cityCode.toString()
				city.forEach((item, n) => {
					item.forEach((i, m) => {
						if (i.value == cityName) {
							this.screenData[0].data = this.screenData[0].data.concat(area[n][m]);

							// _this.ctIndex = m;
							// _this.sfIndex = n;
							return;
						}

					})
				})
			},
			// 依据选择的区域获取商圈street
			getStreet() {

			}
		},
		created() {
			setTimeout(() => {
				this.getArea();
			})
		}
	}
</script>

<style lang="less">
	.screenBarCnt {
		height: 78upx;
	}

	.screenBarBox {
		height: 78upx;
		width: 100%;
		display: flex;
		position: relative;
		left: 0;
		z-index: 988;
		background-color: #FFFFFF;

		.screenItem {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 26upx;
				color: #595959;
				margin-right: 8upx;
			}

			.iconfont {
				font-size: 28upx;
				line-height: 24upx;
				transition: all 0.3s;
			}

			.shaixuan {
				width: 20upx;
				height: 24upx;
			}
		}

		.active {
			text {
				color: #ffcd11;
			}

			.iconfont {
				transform: rotate(180deg);

			}

		}
	}
	.areaBox{
		display: flex;
		.leftArea{
			width: 35%;
			background-color: #f6f6f6;
			display: flex;
			flex-direction: column;
			flex-grow: 0;
			text{
				display: block;
				font-size: 32upx;
				padding: 0 20upx 0 30upx;
				line-height: 70upx;
				overflow: hidden;
				color: #292929;
			}
			.active{
				background-color: #FFFFFF;
				color: #ffcd11;
				font-weight: bold;
			}
		}
		.rightStreet{
			width: 65%;
		}
	}
	
</style>
